<template>
  <Dialog v-model="dialogVisible" title="测试报告" width="90%">
    <div class="num-warp">
      <div class="num-item mr-30px">
        文件总数：<span>{{ tableObject.tableList.totalCount }}</span>
      </div>
      <div class="num-item mr-30px">
        命中文件数：<span>{{ tableObject.tableList.hitCount }}</span>
      </div>
      <div class="num-item" v-if="tableObject.tableList.resultList">
        最高命中率规则为：规则{{ tableObject.tableList.resultList[0].key
        }}<span>（{{ tableObject.tableList.resultList[0].value * 100 }}%）</span>
      </div>
    </div>
    <el-table :data="tableObject.tableList.results" height="500px">
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column props="fileName" label="文件名称">
        <template #default="{ row }">
          <el-link
            style="font-size: 16px"
            @click="downloadFile(row.manageId, row.fileName)"
            type="primary"
          >
            {{ row.fileName }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in resultList"
        :key="index"
        :props="item.ruleNo"
        :label="`规则${item.ruleNo}`"
        :filters="[
          { text: '命中', value: true },
          { text: '未命中', value: false }
        ]"
        :filter-method="filterHandler"
      >
        <template #default="{ row }">
          {{ row.strategyTestingResultS[index].match ? '命中' : '未命中' }}
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>
<script setup>
import { getByTestingId } from '@/api/develop/strategyTesting'

import { useFilePreview } from '@/views/develop/file/useFilePreview'

const dialogVisible = defineModel('visible', { type: Boolean })
const props = defineProps({
  id: String
})

const { downloadFile } = useFilePreview()
const { tableObject, tableMethods } = useTable({
  getListApi: getByTestingId // 分页接口
})
// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods
const resultList = ref()
watch(dialogVisible, (val) => {
  if (val) {
    setSearchParams({ testingId: props.id })
    setTimeout(() => {
      resultList.value = tableObject?.tableList?.results[0].strategyTestingResultS
    }, 500)
  } else {
    resultList.value = []
  }
})

const getRes = (val) => {
  return val
    .map((item) => {
      return `规则${item.ruleNo}${item.match ? '命中' : '未命中'}`
    })
    .join(',')
}

const filterHandler = (value, row, column) => {
  return row.strategyTestingResultS[column.no - 2].match === value
}
</script>
<style lang="scss" scoped>
:deep(.el-pagination) {
  float: none;
  justify-content: end;
}

.num-warp {
  display: flex;
  margin-bottom: 20px;
  .num-item {
    font-size: 16px;
    span {
      color: var(--el-color-primary);
      font-weight: bold;
      font-size: 18px;
    }
  }
}
</style>
